function drawLine(startObj, endObj) {
    // 起点元素为右端中心点
    var y_start = startObj.bottom + startObj.height / 2;
    var x_start = startObj.right;

    // 终点元素为左端中心点
    var y_end = endObj.bottom + endObj.height / 2;
    var x_end = endObj.left;

    let cx1 = x_start + (x_end - x_start) / 2;
    let cy1 = y_start;
    let cx2 = cx1;
    let cy2 = y_end;

    let path = `<path d = \"M${x_start} ${y_start} C${cx1} ${cy1}, ${cx2} ${cy2}, ${x_end} ${y_end}\" style=\"stroke-width:3;stroke: purple;fill:none\"></path>`

    document.getElementById("svg").innerHTML = path;
}

function connect(){
    drawLine($("#I1"), $("#H1"));
    drawLine($("#I1"), $("#H2"));
    drawLine($("#I1"), $("#H3"));
    drawLine($("#I1"), $("#H4"));
    drawLine($("#I2"), $("#H1"));
    drawLine($("#I2"), $("#H2"));
    drawLine($("#I2"), $("#H3"));
    drawLine($("#I2"), $("#H4"));
    drawLine($("#I3"), $("#H1"));
    drawLine($("#I3"), $("#H2"));
    drawLine($("#I3"), $("#H3"));
    drawLine($("#I3"), $("#H4"));

    drawLine($("#H1"), $("#O1"));
    drawLine($("#H1"), $("#O2"));
    drawLine($("#H2"), $("#O1"));
    drawLine($("#H2"), $("#O2"));
    drawLine($("#H3"), $("#O1"));
    drawLine($("#H3"), $("#O2"));
    drawLine($("#H4"), $("#O1"));
    drawLine($("#H4"), $("#O2"));
}